<template>
  <canvas :style="{ width: wid+'px',height:hei+'px' }" id="firstCanvas" canvas-id="firstCanvas"></canvas>
</template>

<script>
const wid = 100,
    hei = 100,
    r = wid / 2,
    rem = wid / 200;
export default {
  data() {
    return {
      wid,
      hei,
      timer: null
    }
  },
  onReady() {

  },
  mounted() {
    let context = uni.createCanvasContext('firstCanvas', this)
    // this.drawTest(context)
    this.draw(context)
    let timer = setInterval(() => {
      this.draw(context)
    }, 1000)
    this.timer = timer
  },
  destroyed() {
    if (this.timer) clearInterval(this.timer)
  },
  methods: {
    drawTest(context) {
      context.setStrokeStyle("#00ff00")
      context.setLineWidth(5)
      context.rect(0, 0, 200, 200)
      context.stroke()
      context.setStrokeStyle("#ff0000")
      context.setLineWidth(2)
      context.moveTo(160, 100)
      context.arc(100, 100, 60, 0, 2 * Math.PI, true)
      context.moveTo(140, 100)
      context.arc(100, 100, 40, 0, Math.PI, false)
      context.moveTo(85, 80)
      context.arc(80, 80, 5, 0, 2 * Math.PI, true)
      context.moveTo(125, 80)
      context.arc(120, 80, 5, 0, 2 * Math.PI, true)
      context.stroke()
      context.draw()
    },
    drawBackground(ctx) {
      let lineWid = 10 * rem
      ctx.save()
      ctx.translate(r, r)
      ctx.beginPath()
      ctx.setStrokeStyle("#626262")
      ctx.setLineWidth(lineWid)
      ctx.arc(0, 0, r - lineWid / 2, 0, 2 * Math.PI);
      ctx.closePath()
      ctx.stroke();
      ctx.beginPath()
      ctx.setFillStyle("#9fc4f0")
      ctx.arc(0, 0, r - lineWid, 0, 2 * Math.PI)
      ctx.fill()

      var hourNums = [3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 1, 2]
      ctx.font = 18 * rem + "px Arial"
      ctx.textAlign = "center"
      ctx.textBaseline = "middle";
      hourNums.forEach((num, index) => {
        var rad = 2 * Math.PI / 12 * index;
        var x = Math.cos(rad) * (r - 30 * rem)
        var y = Math.sin(rad) * (r - 30 * rem)
        ctx.setFillStyle("#000")
        ctx.fillText(num, x, y)
      })

      for (let i = 0; i < 60; i++) {
        var rad = 2 * Math.PI / 60 * i;
        var x = Math.cos(rad) * (r - 18 * rem)
        var y = Math.sin(rad) * (r - 18 * rem)
        ctx.beginPath()
        ctx.arc(x, y, 2 * rem, 0, 2 * Math.PI, false)
        if (i % 5 === 0) ctx.fillStyle = "#000"
        else ctx.fillStyle = "#ccc"
        ctx.fill()
      }
    },
    drawHour(ctx, hour, minute) {
      var rad = 2 * Math.PI / 12 * hour
      var mrad = 2 * Math.PI / 12 / 60 * minute
      ctx.save()
      ctx.beginPath();
      ctx.rotate(rad + mrad)
      ctx.lineWidth = 6 * rem;
      ctx.lineCap = "round";
      ctx.moveTo(0, 10 * rem);
      ctx.lineTo(0, -r / 2);
      ctx.stroke();
      ctx.restore()
    },
    drawMinute(ctx, minute) {
      var rad = 2 * Math.PI / 60 * minute
      ctx.save()
      ctx.beginPath();
      ctx.rotate(rad)
      ctx.lineWidth = 3 * rem;
      ctx.lineCap = "round";
      ctx.moveTo(0, 10 * rem);
      ctx.lineTo(0, -r + 30 * rem);
      ctx.stroke();
      ctx.restore()
    },
    drawSecond(ctx, second) {
      var rad = 2 * Math.PI / 60 * second
      ctx.save()
      ctx.beginPath();
      ctx.fillStyle = "#c14543"
      ctx.rotate(rad)
      ctx.moveTo(-2 * rem, 20 * rem);
      ctx.lineTo(2 * rem, 20 * rem);
      ctx.lineTo(1 * rem, -r + 18 * rem);
      ctx.lineTo(-1 * rem, -r + 18 * rem);
      ctx.fill();
      ctx.restore()
    },
    drawDot(ctx) {
      ctx.beginPath()
      ctx.fillStyle = "#fff"
      ctx.arc(0, 0, 3 * rem, 0, 2 * Math.PI)
      ctx.fill();
    },
    draw(ctx) {
      // console.log("draw")
      ctx.clearRect(0, 0, wid, hei)
      var now = new Date()
      var hour = now.getHours();
      var minutes = now.getMinutes();
      var seconds = now.getSeconds();
      this.drawBackground(ctx)
      this.drawHour(ctx, hour, minutes)
      this.drawMinute(ctx, minutes)
      this.drawSecond(ctx, seconds)
      this.drawDot(ctx)
      ctx.restore()
      ctx.draw()
    }
  }
}
</script>

<style>
</style>
